<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<!-- 审批属性设置 -->
		<div class="approval-attributes" id="approval-attribute-panel">
			<div class="mask"></div>
			<div class="approval-editor-drawer">
				<div class="approval-editor-content">
					<div class="approval-editor-name-wrapper">
						<div class="approval-editor-name">
							审批
						</div>
					</div>
					<div class="approval-editor-form">
						<div class="item-wrapper">
							<div class="approval-type-wrapper">
								<div class="item-key-wrapper">
									<span class="item-key">审批类型</span>
									<label>
										<input type="checkbox" value="不计入审批效率统计" />
										不计入审批效率统计
									</label>
								</div>
								<div class="item-content">
									<label>
										<input type="radio" name="approvalType" id="" value="人工审批" />
										<span>人工审批</span>
									</label>
									<label>
										<input type="radio" name="approvalType" id="" value="自动通过" />
										<span>自动通过</span>
									</label>
									<label>
										<input type="radio" name="approvalType" id="" value="自动拒绝" />
										<span>自动拒绝</span>
									</label>
								</div>
							</div>
						</div>
						<!-- 审批三大功能组 -->
						<div class="">
							<div class="approval-editor-tab-wrapper">
								<div class="approval-function-btn-group">
									<div id="approver" class="btn approval-function-btn active">设置审批人</div>
									<div id="formPrmissions" class="btn approval-function-btn ">表单权限</div>
									<div id="operationPermissions" class="btn approval-function-btn">操作权限</div>
								</div>
								<div class="approval-function-content-approver-set setting-panel" id="approver-setting-panel">
									<div class="approval-function-setting-content">
										<!-- 审批设置 -->
										<div class="approver-setting">
											<div class="header">审批人</div>
											<div class="options" id="approver-user">
												<div>
													<label>
														<input type="radio" name="approver" value="上级" />
														<span>上级</span>
													</label>
												</div>
												<div>
													<label>
														<input type="radio" name="approver" value="部门负责人" />
														<span>部门负责人</span>
													</label>
												</div>
												<div>
													<label>
														<input type="radio" name="approver" value="角色" />
														<span>角色</span>
													</label>
												</div>
												<div>
													<label>
														<input type="radio" name="approver" value="用户组" />
														<span>用户组</span>
													</label>
												</div>
												<div>
													<label>
														<input type="radio" name="approver" value="指定成员" />
														<span>指定成员</span>
													</label>
												</div>
												<div>
													<label>
														<input type="radio" name="approver" checked="checked" value="提交人自选" />
														<span>提交人自选</span>
													</label>
												</div>
												<div>
													<label>
														<input type="radio" name="approver" value="提交人本人" />
														<span>提交人本人</span>
													</label>
												</div>
												<div>
													<label>
														<input type="radio" name="approver" value="节点审批人" />
														<span>节点审批人</span>
													</label>
												</div>
												<div>
													<label>
														<input type="radio" name="approver" value="连续多级上级" />
														<span>连续多级上级</span>
													</label>
												</div>
												<div>
													<label>
														<input type="radio" name="approver" value="连续多级部门负责人" />
														<span>连续多级部门负责人</span>
													</label>
												</div>
												<div>
													<label>
														<input type="radio" name="approver" value="表单内联系人" />
														<span>表单内联系人</span>
													</label>
												</div>
												<div>
													<label>
														<input type="radio" name="approver" value="表单内部门" />
														<span>表单内部门</span>
													</label>
												</div>
											</div>
											<div class="sub-content" id="approver-user-selector">
												<div class="sub-content-top-line"></div>
												<div class="sub-approver  approver-user-selector">
													<p>添加成员<span class="light-text">（不能超过25人）</span></p>
													<div class="add-approver-wrapper">
														<div class="add-approver-btn">＋</div>
														<div class="add-approver-item">
															<img
																src="https://s3-imfile.feishucdn.com/static-resource/v1/v2_4cb935f7-a445-4c1f-a40c-ed52e7f0eb7g~?image_size=32x32&cut_type=&quality=&format=image&sticker_format=.webp">
															<div>朱昌宝</div>
															<div class="close-btn">×</div>
														</div>
														<div class="add-approver-item">
															<img
																src="https://s3-imfile.feishucdn.com/static-resource/v1/v2_4b8f33ab-1830-45df-ae76-68b225df342g~?image_size=32x32&cut_type=&quality=&format=image&sticker_format=.webp">
															<div>仇长俊</div>
															<div class="close-btn">×</div>
														</div>
													</div>
								
												</div>
											</div>
										</div>
									</div>
									<div class="add-approver-setting">
										<div class="add-operator">＋ 添加审批人</div>
									</div>
									<!-- 多人审批时 -->
									<div class="item-wrapper">
										<div class="item-key">
											多人审批时
											<i aria-label="图标: question-circle"
												class="anticon anticon-question-circle approver-tip-question-icon">
												<svg viewBox="64 64 896 896" focusable="false" class=""
													data-icon="question-circle" width="1em" height="1em" fill="currentColor"
													aria-hidden="true">
													<path
														d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
													</path>
													<path
														d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z">
													</path>
												</svg></i>
										</div>
										<div class="item-content">
											<div style="margin-bottom: 12px;">
												<label>
													<input type="radio" name="approvalMethod" value="会签" />
													<span>会签（需所有人审批人同意）</span>
												</label>
											</div>
											<div style="margin-bottom: 12px;">
												<label>
													<input type="radio" name="approvalMethod" value="或签" />
													<span>或签（一名审批人同意即可）</span>
												</label>
											</div>
											<div style="margin-bottom: 12px;">
												<label>
													<input type="radio" name="approvalMethod" value="依次审批" />
													<span>依次审批（按顺序依次审批）</span>
												</label>
											</div>
										</div>
									</div>
									<!-- 审批人为空时 -->
									<div class="item-wrapper">
										<div class="item-key">
											审批人为空时
											<i aria-label="图标: question-circle"
												class="anticon anticon-question-circle approver-tip-question-icon">
												<svg viewBox="64 64 896 896" focusable="false" class=""
													data-icon="question-circle" width="1em" height="1em" fill="currentColor"
													aria-hidden="true">
													<path
														d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
													</path>
													<path
														d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z">
													</path>
												</svg></i>
										</div>
										<div class="item-content">
											<label>
												<input type="radio" name="approvalIsNull" value="自动通过" />
												<span>自动通过</span>
											</label>
											<label>
												<input type="radio" name="approvalIsNull" value="指定人员审批" />
												<span>指定人员审批</span>
											</label>
											<label>
												<input type="radio" name="approvalIsNull" value="转交给管理员审批" />
												<span>转交给管理员审批</span>
											</label>
										</div>
									</div>
									<!-- 审批人为空时 -->
									<div class="item-wrapper">
										<div class="item-key">
											审批人与提交人为同一人时
											<i id="anticon" aria-label="图标: question-circle"
												class="anticon anticon-question-circle approver-tip-question-icon">
												<svg viewBox="64 64 896 896" focusable="false" class=""
													data-icon="question-circle" width="1em" height="1em" fill="currentColor"
													aria-hidden="true">
													<path
														d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
													</path>
													<path
														d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z">
													</path>
												</svg>
												<!-- 悬浮提示框 -->
												<div id="remark-info-panel" class="remark-info-panel">
													<div class="tip-content">
														<p class="main-title">什么情况下会出现审批人为空？</p>
														<p>设置了“上级”审批，但申请人在飞书管理后台 - 组织架构中没有上级</p>
														<p>设置了“部门负责人”审批，但申请人在飞书管理后台 - 组织架构中没有部门负责人</p>
														<p>设置了“角色”审批，但该角色在飞书管理后台 - 组织架构中没有任何成员</p>
														<p>设置了“用户组”审批，但该用户组在飞书管理后台 - 组织架构中没有任何成员</p>
													</div>
												</div>
											</i>
										</div>
										<div class="item-content approver-self">
											<div>
												<label>
													<input type="radio" value="自动通过" />
													<span>由提交人自己审批</span>
												</label>
											</div>
											<div>
												<label>
													<input type="radio" value="指定人员审批" />
													<span>自动跳过</span>
												</label>
											</div>
											<div>
												<label>
													<input type="radio" value="转交给管理员审批" />
													<span>转交给直属上级</span>
												</label>
											</div>
											<div>
												<label>
													<input type="radio" value="转交给管理员审批" />
													<span>转交部门负责人审批</span>
												</label>
											</div>
										</div>
									</div>
								
									<!-- 提示 -->
									<div class="item-wrapper">
										<div class="item-key">提示</div>
										<div class="item-content more-info">
											<p>若审批人离职，会自动转交给审批人的上级代为处理</p>
											<p>若同一审批人在流程中重复出现，默认只审批一次。可前往<span class="goto-other-setting">更多设置</span>修改</p>
										</div>
									</div>
									<!-- 抄送人设置 -->
									<div class="item-wrapper">
										<div class="item-key">抄送人设置</div>
										<div class="item-content">
											<div class="add-operator">＋ 添加抄送人</div>
										</div>
									</div>
									<!-- 提示 -->
									<div class="item-wrapper">
										<div class="item-key">提示</div>
										<div class="item-content more-info">
											<p>抄送的人数最多支持100人以内</p>
										</div>
									</div>
								</div>
								<!-- 表单权限设置 -->
								<div class="approval-function-content-form-authority-set setting-panel" id="form-authority-setting-panel">
									<table>
										<thead>
											<td>表单字段</td>
											<td><label><input type="checkbox" /><span>可读</span></label></td>
											<td><label><input type="checkbox" /><span>编辑</span></label></td>
										</thead>
										<tr>
											<td>项目</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>客户</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>收款发生日期</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>收款类别</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>收款金额（元）</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>归属人</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>附件</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
										<tr>
											<td>备注</td>
											<td><input type="checkbox" /></td>
											<td><input type="checkbox" /></td>
										</tr>
									</table>
								</div>
								<!-- 操作权限设置 -->
								<div class="approval-function-content-action-authority-set setting-panel" id="operation-authority-panel">
									<div class="action-content">
										<div class="action-content-item">
											<label>
												<input type="checkbox" value="允许转交" />
												<span>允许转交</span>
											</label>
										</div>
										<div class="action-content-item">
											<label>
												<input type="checkbox" value="允许加/减签" />
												<span>允许加/减签</span>
											</label>
										</div>
										<div class="action-content-item">
											<label>
												<input type="checkbox" value="上级" />
												<span>允许退回</span>
											</label>
										</div>
									</div>
									<div class="ant-divider ant-divider-horizontal" role="separator"></div>
									<div class="action-sign-content">
										<div class="item-wrap">
											<div class="item-key-wrapper">
												<span class="item-key">手写签名</span>
											</div>
											<div class="item-content">
												<label class="ant-checkbox-wrapper">
													<span class="ant-checkbox">
														<input type="checkbox" class="ant-checkbox-input" value="">
														<span class="ant-checkbox-inner"></span>
													</span>
													<span>
														<span class="form-action-permission-normal-font">审批同意时需手写签名</span>
													</span>
												</label>
											</div>
										</div>
										
										<div class="item-wrap">
											<div class="item-key-wrapper">
												<span class="item-key">审批意见</span>
											</div>
											<div class="item-content">
												<label class="ant-checkbox-wrapper">
													<span class="ant-checkbox">
														<input
															type="checkbox" class="ant-checkbox-input" value="">
														<span class="ant-checkbox-inner"></span>
													</span>
													<span>
														<span class="form-action-permission-normal-font">提交审批需填写审批意见</span>
													</span>
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 按钮 -->
					<div class="approval-editor-footer-wrapper">
						<div class="btn-group">
							<button class="fz-btn primary" type="button">保存</button>
							<button class="fz-btn cancel" type="button">取消</button>
						</div>
						
					</div>
				</div>
				
			</div>
		</div>
	</body>
</html>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	var rootNode = new FlowNodes();
	document.body.appendChild(rootNode.getElement());
	
	var startFlowNode = new FlowNode("提交", "start");
	rootNode.addFlowNode(startFlowNode);
	var approvalFlowNode1 = new FlowNode("审批节点1", "approval");
	rootNode.addFlowNode(approvalFlowNode1)

	var approvalFlowNode2 = new FlowNode("审批节点2", "approval");
	rootNode.addFlowNode(approvalFlowNode2)

	var ccFlowNode = new FlowNode("抄送后勤部", "cc");
	rootNode.addFlowNode(ccFlowNode)

	var flowNodeRoute = new FlowNodeRoute();
	rootNode.addFlowNode(flowNodeRoute)
	
	var endFlowNode = new FlowNode("结束", "end");
	rootNode.addFlowNode(endFlowNode)
	
	
	// 初始化属性面板
	class ApprovalAttributePanel{
		constructor(arg) {
		    this.initListenEvents();
		}
		
		initListenEvents(){
			
			
		}
		
	}
	var s = new ApprovalAttributePanel();
	
	document.getElementById("anticon").addEventListener("mouseover",(e)=>{
		console.log("移入")
		document.getElementById("remark-info-panel").style.display="block";
	},false);
	document.getElementById("anticon").addEventListener("mouseout",(e)=>{
		console.log("移出",e)
		setTimeout(()=>{
			document.getElementById("remark-info-panel").style.display="none";
		},100)
	});
</script>
